.popup {
    position: fixed;
    z-index: 1070;
    top: -9999px;
    left: -9999px;
    background-color: rgb(var(--bg-color-secondary));
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--box-shadow-base);

    &-enter {
        .effect();

        opacity: 0;
        animation-play-state: paused;
        animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
    }

    &-enter-active {
        animation-name: popup-slide-up-in;
        animation-play-state: running;
    }

    &-exit {
        .effect();

        opacity: 1;
        animation-name: popup-slide-up-out;
        animation-play-state: running;
        animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
    }

    &-exit-active {
        display: none;
    }

    .effect() {
        transform-origin: 0 0;
        animation-duration: 0.15s;
        animation-fill-mode: both;
    }

    @keyframes popup-slide-up-in {
        0% {
            transform-origin: 0 0;
            transform: scaleY(0);
            opacity: 0;
        }

        100% {
            transform-origin: 0 0;
            transform: scaleY(1);
            opacity: 1;
        }
    }

    @keyframes popup-slide-up-out {
        0% {
            transform-origin: 0 0;
            transform: scaleY(1);
            opacity: 1;
        }

        100% {
            transform-origin: 0 0;
            transform: scaleY(0);
            opacity: 0;
        }
    }
}

.popup-mask {
    position: fixed;
    z-index: 1060;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
